<!-- 签署人列表弹框 -->
<template>
  <div class="pms-zr-signatoryList">
    <div class="signSeal">
      <el-input v-model="sealUserName" class="pms-zr-input" placeholder="请输入用户姓名" style="width: 180px" clearable />
      <el-input
        v-model="sealUserPhone"
        placeholder="请输入用户电话"
        class="pms-zr-input"
        style="width: 180px;margin-left: 20px;"
        clearable
      />
      <el-button
        class="pms-zr-button-primary pms-zr-requireBtn"
        size="small"
        @click="doSearch"
      >
        查询
      </el-button>
    </div>
    <div class="sealKeeperList">
      <div class="left">
        <div class="selectorTitle">选择人员</div>
        <div class="selector">
          <MyTable
            id="userId"
            ref="sealLeftRef"
            class="myTableClass"
            :table-data="tableData"
            :columns="tableColumnsEnum[flagList]"
            :is-clear-selection="false"
            @handleSelection="handleSelection"
          />
        </div>
      </div>
      <div class="right">
        <div class="selectorTitle">已选择人员</div>
        <div class="selector">
          <MyTable
            id="userId"
            ref="sealRightRef"
            class="myTableClass"
            :is-selection="false"
            :table-data="getSelectPer"
            :columns="tableColumns"
          >
            <template #controls="{ scope }">
              <div class="pms-zr-tableColor" @click="del(scope)">删除</div>
            </template>
          </MyTable>
        </div>
      </div>
    </div>
    <pagination
      v-if="pageParam.total > 10"
      :is-popper-body="false"
      :total="pageParam.total"
      :page.sync="pageParam.pageNum"
      :limit.sync="pageParam.pageSize"
      @pagination="doSearch"
    />
  </div>
</template>

<script>
import SysConst from '@/common/const'
import { dialogSealLabel, dialogSignLabel, tableColumns } from '.'

import MyTable from '@/components/basic/myTable'
import { querySealApi, querySignerApi, queryPersonApi } from '@/api/attachmentInfo'

export default {
    name: 'SignatoryList',
    components: {
        MyTable
    },
    props: {
        // 盖章单位编码
        rowOrgCode: {
            type: String,
            default: ''
        },
        // 公司类型 1铁塔公司，2服务商公司
        sealType: {
            type: String,
            default: ''
        },
        // 印章管理员和签署人标识
        flagList: {
            type: String,
            required: true,
            default: 'A'
        },
        // 签署人说印章管理员ID
        rowUserId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            tableData: [], // 弹框选择印章管理员数据
            getSelectPer: [], // 所选数据
            tableColumns, // 已选择列表表头配置
            tableColumnsEnum: {
                'A': dialogSignLabel, // 印章管理员表头
                'B': dialogSealLabel // 弹框选择签署人表头
            },
            sealUserName: '', // 选择签署人-用户姓名
            sealUserPhone: '', // 选择签署人-用户电话
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            }

        }
    },
    created() {
        this.doSearch()
        this.queryPerson()
    },
    methods: {
        doSearch(item) {
            this.flagList === 'A' ? this.searchSealKeeper(item) : this.searchSignatory(item)
        },
        // 查询印章管理员列表数据
        searchSealKeeper(item) {
            const params = {
                orgCode: this.rowOrgCode,
                sealType: this.sealType,
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                userName: this.sealUserName,
                phoneNo: this.sealUserPhone
            }
            querySealApi(params).then(res => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
                }
                this.tableData = res.data.dataList
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        // 查看签署人列表数据
        searchSignatory(item) {
            const params = {
                orgCode: this.rowOrgCode,
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                userName: this.sealUserName,
                phoneNo: this.sealUserPhone
            }
            querySignerApi(params).then(res => {
                if (+res.code !== 200){
                  return Promise.reject(res)
                }
                this.tableData = res.data.records
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        // 初始化查询已选人员
        queryPerson() {
            queryPersonApi({ userId: this.rowUserId }).then(res => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
                }
                if (res.data.length) {
                    this.$refs.sealLeftRef.toggleRowEvent(res.data)
                }
            })
        },
        // 删除当前数据并取消勾选状态
        del(scope) {
            this.getSelectPer = this.getSelectPer.filter(item => item.userId !== scope.userId)
            this.$refs.sealLeftRef.$refs.tableRef.selection.forEach((item, idx) => {
                if (item.userId === scope.userId) {
                    this.$refs.sealLeftRef.$refs.tableRef.selection.splice(idx, 1)
                }
            })
            this.$refs.sealLeftRef.toggleRowEvent(scope, false)
        },
        // 监听子组件已选数据
        handleSelection(val) {
            this.getSelectPer = val
        }
    }
}
</script>

<style lang="scss" scoped>
.myTableClass {
    width: 100%;
}
</style>
